package com.fishingwithme.android.ui.screens.my.settings

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.filled.WbSunny
import androidx.compose.material.icons.filled.Brightness3
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.navigation.NavController
import com.fishingwithme.android.R
import com.fishingwithme.android.data.local.PreferencesManager
import com.fishingwithme.android.ui.screens.my.MyScreenHiltEntryPoint
import com.fishingwithme.android.ui.theme.AppDimensions
import dagger.hilt.android.EntryPointAccessors
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ThemeSettingsScreen(navController: NavController) {
    val context = LocalContext.current
    val preferencesManager = EntryPointAccessors.fromApplication(
        context.applicationContext,
        MyScreenHiltEntryPoint::class.java
    ).preferencesManager()

    val currentThemeMode by preferencesManager.getThemeMode().collectAsState(
        initial = PreferencesManager.THEME_FOLLOW_SYSTEM
    )

    val coroutineScope = rememberCoroutineScope()

    val themeOptions = listOf(
        ThemeOption(
            id = PreferencesManager.THEME_FOLLOW_SYSTEM,
            title = stringResource(R.string.follow_system),
            icon = Icons.Default.Settings
        ),
        ThemeOption(
            id = PreferencesManager.THEME_LIGHT,
            title = stringResource(R.string.light_mode),
            icon = Icons.Default.WbSunny
        ),
        ThemeOption(
            id = PreferencesManager.THEME_DARK,
            title = stringResource(R.string.dark_mode),
            icon = Icons.Default.Brightness3
        )
    )

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(stringResource(R.string.theme_settings)) },
                navigationIcon = {
                    IconButton(onClick = { navController.popBackStack() }) {
                        Icon(
                            imageVector = Icons.Default.ArrowBack,
                            contentDescription = stringResource(R.string.back)
                        )
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.surface
                )
            )
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .padding(AppDimensions.SPACING_16)
        ) {
            themeOptions.forEach { option ->
                ThemeOptionItem(
                    option = option,
                    isSelected = currentThemeMode == option.id,
                    onClick = {
                        // Save the selected theme mode
                        coroutineScope.launch {
                            preferencesManager.saveThemeMode(option.id)
                        }
                    }
                )
                Divider(modifier = Modifier.fillMaxWidth())
            }
        }
    }
}

@Composable
fun ThemeOptionItem(
    option: ThemeOption,
    isSelected: Boolean,
    onClick: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .padding(vertical = AppDimensions.SPACING_16),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = option.icon,
            contentDescription = null,
            tint = MaterialTheme.colorScheme.primary,
            modifier = Modifier.size(AppDimensions.ICON_SIZE_24)
        )
        
        Spacer(modifier = Modifier.width(AppDimensions.SPACING_16))
        
        Text(
            text = option.title,
            style = MaterialTheme.typography.bodyMedium,
            modifier = Modifier.weight(1f)
        )
        
        if (isSelected) {
            Icon(
                imageVector = Icons.Default.Check,
                contentDescription = "Selected",
                tint = MaterialTheme.colorScheme.primary
            )
        }
    }
}

class ThemeOption(
    val id: String,
    val title: String,
    val icon: ImageVector
)
